{% extends "base.html" %}
{% block title %}
    知了传课-详情
{% endblock %}
{% block head %}
    <script src="{{ url_for('static',filename="jquery/jquery.3.6.min.js") }}"></script>
    <script src="{{ url_for('static',filename="js/register.js") }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/detail.css') }}">

{% endblock %}
{% block body %}
    <div class="container">
        <div class="row" style="margin-top: 20px;">
            <div class="col"></div>
            <div class="col-10" style="background-color: #fff;padding: 20px;">
                <h3 class="page-title">{{ question.question }}</h3>
                <p class="question-info">
                    <span>作者：{{ question.author.username }}</span>
                    <span>时间：{{ question.join_time|my_format }}</span>
                </p>
                <hr>
                <p class="question-content">{{ question.content }}</p>
                <hr>
                <h4 class="comment-group-title">评论（2）：</h4>
                <form action="{{ url_for("qa.public_answer") }}" method="post">
                    <div class="form-group">
                        <input type="text" placeholder="请填写评论" name="content" class="form-control">
                        <input type="hidden" name="question_id" value={{ question.id }}>
                    </div>
                    <div class="form-group" style="text-align: right;">
                        <button class="btn btn-primary">评论</button>
                    </div>
                </form>
                <ul class="comment-group">
                    {% for answer in question.answers %}
                        <li>
                            <div class="user-info">
                                <img class="avatar" src={{ url_for('static', filename='images/avatar.jpg') }} alt="">
                                <span class="username">{{ answer.user.username }}</span>
                                <span class="create-time">{{ answer.join_time }}</span>
                            </div>
                            <p class="comment-content">{{ answer.content }}</p>
                        </li>
                    {% endfor %}

                </ul>
            </div>
            <div class="col"></div>
        </div>
    </div>
{% endblock %}
